<template>
  <div class="all">
    <!-- 渲染好友列表 -->
    <FriendCard
      class="FriendCard"
      v-for="(friend, index) in userStore.friendList"
      :key="index"
      :imgurl="friend.avatar"
      :username="friend.userName"
      @click="toChat(friend,index)"
    ></FriendCard>
    <!-- 渲染添加好友卡片 -->
    <FriendCard
      class="FriendCard"
      :imgurl="addFriendCard.imgurl"
      :username="addFriendCard.username"
      @click="addFriendForm = true"
    ></FriendCard>
  </div>
  <!-- 添加好友弹出框 -->
  <el-dialog class="dialog" v-model="addFriendForm" width="800" @close="clear">
    <h1>添加好友</h1>
    <hr />
    <el-row style="height: 40px">
      <el-input
        v-model="search"
        placeholder="请输入您想要搜索的好友昵称"
        class="custom-input"
        clearable
      >
        <template #append>
          <el-button @click="getUserList"
            ><el-icon style="margin-top: -5px"><Search /></el-icon
          ></el-button>
        </template>
      </el-input>
    </el-row>
    <el-row v-for="item in searchUser.values" :key="item.userId" class="el-row">
      <el-col :span="21" style="font-size: 20px">{{ item.userName }}</el-col>
      <el-col :span="3">
        <el-button type="primary" @click="friendRequest(item.userId)"
          >添加好友</el-button
        >
      </el-col>
    </el-row>
  </el-dialog>
  <!-- 聊天框 -->
  <ChatComponent @close="empty"></ChatComponent>
</template>
  
<script setup>
import FriendCard from "@/components/friend/FriendCard.vue";
import ChatComponent from "@/components/chat/ChatComponent.vue";
import { reactive, ref } from "vue";
import api from "@/api/service";
import { useUser } from "@/store";
const userStore = useUser();
//添加好友弹窗是否可见
const addFriendForm = ref(false);
//添加好友弹窗的信息
const addFriendCard = {
  imgurl: require("../../assets/加号.png"),
  username: "添加好友",
}; 
//搜索好友框输入
const search = ref("");
//搜索出来的用户列表
const searchUser = reactive([]);
//根据用户输入获取所有的用户列表
const getUserList = () => {
  return api.getUserList(search.value).then((resp) => {
    searchUser.values = resp;
  });
};
//清空弹窗
const clear = () => {
  search.value = "";
  searchUser.values = [];
};
//添加好友
const friendRequest = (friendId) => {
  return api.friendRequest(friendId).then(() => {
    location.reload(); //浏览器刷新
  });
};
//往聊天框传参
function toChat(friend,index) {
  userStore.chatId = userStore.privateChatRoomList[index].id; //获取当前的聊天室Id
  userStore.chatName = friend.userName;//获取当前聊天框的姓名
  userStore.websocket = api.createWebsocket();
  return api
    .getChatRoomUserList(userStore.chatId) //获取当前聊天室下的所有用户
    .then(() => {
      api.getPrivateMessage(userStore.chatId).then((resp) => {   //获取聊天记录
        resp.forEach(function (item) {
          // console.log( JSON.parse(item) )
          // 处理每个 item
          return JSON.parse(item);
        });
        userStore.messageList = resp;
        userStore.chatComponentIsView = true; //打开当前聊天框
      });
    });
}
const empty = ()=>{
  userStore.messageList = null;
  userStore.userList = null;
  userStore.websocket.close();
  userStore.websocket = null;
}
</script>
  
<style scoped>
.all {
  display: flex;
  flex-wrap: wrap;
}
.FriendCard {
  /* background-color: green; */
  transition: transform 0.3s ease;
}
.FriendCard:hover {
  transform: scale(1.2);
}
.el-row {
  margin-top: 20px;
}
.custom-input {
  font-size: 32px; /* 设置字体大小 */
}
</style>
  